<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <xxxx></xxxx>

      <!-- 这样不行,找不到,页面会报错,  mycomponent -->
      <!-- <MyComponent></MyComponent> -->

      <!-- 注册时如果是大驼峰,使用时,需要转换成短横线 -->
      <my-component></my-component>
    </div>

    <script src="./js/vue.js"></script>

    <script type="text/x-template" id="xxx">
      <div>
        <h1>注意，我才是 “老大”</h1>

        <MyComponent></MyComponent>
      </div>
    </script>

    <script>
      Vue.config.productionTip = false;

      Vue.component("xxxx", {
        // name 选项,设置 vue devtools 中显示名称
        name: "my",
        data: function () {
          return {
            name: "里斯",
          };
        },
        template: `
            <div>
                <p>xxxx</p>
            </div>
        `,
      });

      // 短横线写法 my-component
      // 大驼峰写法 MyComponent
      Vue.component("MyComponent", {
        template: `
            <div>
                <p>my-component</p>
            </div>
        `,
      });

      new Vue({
        el: "#app",

        // template: `
        //   <div>
        //     <h1>注意，我才是 “老大”</h1>

        //     <MyComponent></MyComponent>
        //   </div>
        // `,

        template: "#xxx", // 会寻找 id 为 xxx 且 type="text/x-template" 的 script 标签里面的内容，当成模板
      });
    </script>
  </body>
</html>
